.scrollContainer {
  position: relative;
}

.arrowButton {
  &:active {
    transform: none;
  }
}

.hidden {
  display: none !important;
}

.leftArrow {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  padding-right: var(--mantine-spacing-xl);
  z-index: 12;
  display: block;
  background-image: linear-gradient(90deg,
      light-dark(#fff, var(--mantine-color-dark-7)) 0%,
      transparent 100%);
}

.rightArrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding-left: var(--mantine-spacing-xl);
  z-index: 12;
  display: block;
  background-image: linear-gradient(270deg,
      light-dark(#fff, var(--mantine-color-dark-7)) 0%,
      transparent 100%);
}

.viewport {
  overflow-x: scroll;
  overflow-y: hidden;
}
